import { createForm } from "@formily/core";
import {
  FormProvider,
  createSchemaField,
  useFieldSchema,
} from "@formily/react";

const form = createForm();

const Custom = () => {
  const schema = useFieldSchema();
  return (
    <code>
      <pre>{JSON.stringify(schema.toJSON(), null, 2)}</pre>
    </code>
  );
};

const SchemaField = createSchemaField({
  components: {
    Custom,
  },
});

export default () => (
  <FormProvider form={form}>
    <SchemaField>
      <SchemaField.Object
        name="custom"
        x-component="Custom"
        x-component-props={{
          schema: {
            type: "object",
            properties: {
              input: {
                type: "string",
                "x-component": "Custom",
              },
            },
          },
        }}
      />
    </SchemaField>
  </FormProvider>
);
